import { RenderComponent, ComponentType,  type ComponentProps } from './component'
import { CanvasRenderer } from './renderer'
import { useDrawPanelStore } from '~/plugins/store';

export function useDrawPanel(el: Ref<HTMLElement|undefined>) {
  
  const store = useDrawPanelStore()
  let renderer: CanvasRenderer;
  const selectedComponent = ref<RenderComponent>({} as any);
  const installed = ref(false);
  const selectedComponentProps = reactive<ComponentProps>({
    pageNo: 1,
    groupId: '',
    type: ComponentType.NONE,
  })
  watch(() => store.currentComponents, (val) => {
    (store.pagesComponents as any)[selectedComponentProps.pageNo] = JSON.parse(JSON.stringify(val));
  }, {
    deep: true
  })
  

  function onSelectedComponent(component: RenderComponent) {
    selectedComponent.value = component;
  }
  function onUnSelectedComponent() {
    selectedComponent.value = {} as any;
  }
  function onResizeComponent(component: RenderComponent) {
    selectedComponent.value.startX = component.startX;
    selectedComponent.value.startY = component.startY;
    selectedComponent.value.endX = component.endX;
    selectedComponent.value.endY = component.endY;
    updatePositionComponent(component);
  }

  function updatePositionComponent(component: RenderComponent) {
    const index = store.currentComponents.findIndex(item => item.id === component.id);
    if (index !== -1) {
      store.currentComponents[index].startX = component.startX;
      store.currentComponents[index].startY = component.startY;
      store.currentComponents[index].endX = component.endX;
      store.currentComponents[index].endY = component.endY;
    }
  }

  function onAddedComponent(component: RenderComponent) {
    if (!component.props.groupId) {
      component.props.groupId = selectedComponentProps.groupId;
      component.props.pageNo = selectedComponentProps.pageNo;
    }
    store.currentComponents.push({
      id: component.id,
      type: component.props.type,
      groupId: component.props.groupId,
      pageNo: component.props.pageNo,
      startX: component.startX,
      startY: component.startY,
      endX: component.endX,
      endY: component.endY,
    });
  }

  function onDeletedComponent(component: RenderComponent) {
    const index = store.currentComponents.findIndex(item => item.id === component.id);
    if (index === -1) return
    store.currentComponents.splice(index, 1);
  }

  function onCleanComponent() {
    store.currentComponents.length = 0;
  }

  onMounted(() => {
    if (!el.value) {
      console.warn('el is undefined');
      return;
    }
    renderer = new CanvasRenderer(el.value);
    renderer.on('selected', onSelectedComponent)
    renderer.on('un-selected', onUnSelectedComponent)
    renderer.on('move', onResizeComponent)
    renderer.on('resize', onResizeComponent)
    renderer.on('added', onAddedComponent)
    renderer.on('deleted', onDeletedComponent)
    renderer.on('clean', onCleanComponent)
    renderer.render();
    installed.value = true;
  })


  onUnmounted(() => {
    renderer?.uninstall();
    installed.value = false;
  })

  function clean() {
    renderer?.clean();
  }

  function addComponent(component: RenderComponent) {
    renderer.addComponent(component);
  }

  function setComponentTypeOnDraw(type: ComponentType) {
    renderer.drawComponentType = type;
  }
  
  function removeComponent(ids: string[]) {
    ids.forEach(id => {
      renderer.removeComponent(id)
    })
  }

  function clearSelectedComponent() {
    renderer.clearSelectedComponent();
  }

  function selectComponent(id: string) {
    renderer.selectComponent(id);
  }

  return {
    selectedComponent,
    installed,
    clean,
    addComponent,
    removeComponent,
    selectedComponentProps,
    setComponentTypeOnDraw,
    clearSelectedComponent,
    selectComponent,
    store,
    pagesComponents: store.pagesComponents,
    currentComponents: store.currentComponents,
    componentGroups: store.componentGroups,
    selectedComponentGroup: store.selectedComponentGroup
  } as const;
}
